<template>
    <view>
        <!-- 用户信息开始 -->
        <view class="user_info">
            <view class="user_icon">
                <image :src="imgDetail.user.avatar" mode="widthFix"></image>
            </view>
            <view class="user_desc">
                <view class="user_name">{{imgDetail.user.name}}</view>
                <view class="user_time">{{imgDetail.cnTime}}</view>
            </view>
        </view>
        <!-- 用户信息结束 -->

        <!-- 高清大图开始 -->
        <swiper-action @swiperAction="handleSwiperAction">
        <view class="high_img">
            <image mode="widthFix" :src="imgDetail.thumb"></image>
        </view>
        </swiper-action>
        <!-- 高清大图结束 -->

        <!-- 点赞开始 -->
        <view class="user_rank">
            <view class="rank">
            <text class="iconfont icondianzan">{{imgDetail.rank}}</text>
            </view>
            <view class="user_collect">
                <text class="iconfont iconshouchang">❤收藏</text>
            </view>
        </view>
        <!-- 点赞结束 -->
        
        <!-- 专辑开始 -->
        <view class="album_wrap" v-if="album.length">
            <view class="album_title">相关</view>
            <view class="album_list">
                <view class="album_item" v-for="item in album" :key="item.id">
                    <view class="album_cover">
                        <image mode="aspectFill" :src="item.cover"></image>
                    </view>
                    <view class="album_info">
                        <view class="album_info_text">专辑</view>
                        <view class="album_name">{{item.name}}</view>
                        <text class="iconfont iconiconfontjiantou4"></text>
                    </view>
                </view>
            </view>
        </view>
        <!-- 专辑结束 -->
          <!-- 最热评论开始 -->
    <view class="comment hot" v-if="hot.length">
      <view class="hot_title">
        <text class="iconfont iconhot1"></text>
        <text class="comment_text">最热评论</text>
      </view>
      <view class="comment_list">
        <view class="comment_item" v-for="item in hot" :key="item.id">
          <!-- 用户信息 -->
          <view class="comment_user">
            <!-- 用户头像 -->
            <view class="user_icon"><image :src="item.user.avatar" mode="widthFix"></image></view>
            <!-- 用户名称 -->
            <view class="user_name">
              <view class="user_nickname">{{item.user.name}}</view>
              <view class="user_time">{{item.cnTime}}</view>
            </view>
            <!-- 用户徽章 -->
            <view class="user_badge">
              <image v-for="item2 in item.user.title" :key="item2.icon" :src="item2.icon"></image>
            </view>
          </view>
          <!-- 评论数据 -->
          <view class="comment_desc">
            <view class="comment_content">{{item.content}}</view>
            <view class="comment_like">
              <text class="iconfont icondianzan">{{item.size}}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 最热评论结束 -->

    <!-- 最新评论开始 -->
    <view class="comment new" v-if="comment.length">
      <view class="hot_title">
        <text class="iconfont iconpinglun"></text>
        <text class="comment_text">最新评论</text>
      </view>
      <view class="comment_list">
        <view class="comment_item" v-for="item in comment" :key="item.id">
          <!-- 用户信息 -->
          <view class="comment_user">
            <!-- 用户头像 -->
            <view class="user_icon"><image :src="item.user.avatar" mode="widthFix"></image></view>
            <!-- 用户名称 -->
            <view class="user_name">
              <view class="user_nickname">{{item.user.name}}</view>
              <view class="user_time">{{item.cnTime}}</view>
            </view>
            <!-- 用户徽章 -->
            <view class="user_badge">
              <image v-for="item2 in item.user.title" :key="item2.icon" :src="item2.icon"></image>
            </view>
          </view>
          <!-- 评论数据 -->
          <view class="comment_desc">
            <view class="comment_content">{{item.content}}</view>
            <view class="comment_like">
              <text class="iconfont icondianzan">{{item.size}}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 最热评论结束 -->

    <!-- 下载图片开始 -->
    <view class="down_warp">
      <view class="btn" @click="download">下载图片</view>
    </view>
    <!-- 下载图片结束 -->
    </view>
</template>

<script>
import moment from 'moment'
import swiperAction from '@/components/swiperAction'
moment.locale("zh-cn")
    export default { 
        data(){
            return{
                 imgDetail: {},
                 album: [],  
                 hot: [],   
                 comment: [],  
                 imgIndex: 0   
            }
        },
        components:{
          swiperAction
        },
        onLoad(){
            const {imgIndex}=getApp().globalData
            this.imgIndex=imgIndex
            this.getData()
        },
        methods:{
          getData(){
            const {imgList}=getApp().globalData
            
            this.imgDetail=imgList[this.imgIndex]
            this.imgDetail.cnTime=moment(this.imgDetail.atime*1000).fromNow()
            this.getComments(this.imgDetail.id)
          },
            getComments(id){
                this.request({
                    url: `http://157.122.54.189:9088/image/v2/wallpaper/wallpaper/${id}/comment`
                })
                .then(result=>{
                    this.album=result.res.album
                    result.res.hot.forEach(v=>v.cnTime=moment(v.atime*1000).fromNow)
                    result.res.comment.forEach(v=>v.cnTime=moment(v.atime*1000).fromNow)
                    this.hot=result.res.hot
                    this.comment=result.res.comment
                })
            },
            handleSwiperAction(e){
              const {imgList}=getApp().globalData
              if(e.direction==='left'&&this.imgIndex<imgList.length-1){
                this.imgIndex++
                this.getData()
              } else if(e.direction==='right'&&this.imgIndex>0){
                this.imgIndex--
                this.getData()
              }else{
                uni.showToast({
                  title:"没有更多数据了",
                  icon:"none"
                })
              }
            },
            async download(){
              await uni.showLoading({
                title:'下载中'
              })
             const result1=await uni.downloadFile({
                url:this.imgDetail.img
              })
              const {tempFilePath}=result1[1]

              const result2= await uni.saveImageToPhotosAlbum({
                filePath:tempFilePath
              })
              uni.hideLoading()
              await uni.showToast({
                title:'下载成功'
              })
            }
        }
    }
</script>

<style lang="scss" scoped>
.user_info{
    display: flex;
    padding: 20rpx;
    .user_icon{
        padding: 0 20rpx;
        image{
            width: 88rpx;
            border-radius: 50%;
        }
    }
    .user_desc{
        .user_name{
            color: #000;
            font-weight: 600;
        }
        .user_time{
            color: #ccc;
            font-size: 24rpx;
            padding: 10rpx 0;
        }
    }
}
.user_rank{
    border-bottom: 5rpx solid #eee;
    display: flex;
    height: 80rpx;
    .rank{
        display: flex;
        justify-content: center;
        align-items: center;
        flex: 1;
        .iconfont{

        }
    }
    .user_collect{
        display: flex;
        justify-content: center;
        align-items: center;
        flex: 1;
        .iconfont{

        }
    }
}
.album_wrap{
    padding: 20rpx;
    .album_title{
        padding: 10rpx 0;
    }
    .album_list{
        .album_item{
            display: flex;
            padding: 10rpx 0;
            border-bottom: 10rpx solid #eee;
            .album_cover{
                flex: 1;
                image{
                   width: 180rpx;
                   height: 180rpx;
                }
            }
            .album_info{
                flex: 3;
                padding-left: 20rpx;
                position: relative;
                .album_info_text{
                   width: 100rpx;
                   height: 50rpx;
                   background-color: $color;
                   color: #fff;
                   display: flex;
                   justify-content: center;
                   align-items: center;
                }
                .album_name{
                    padding: 10rpx 0;
                    color: #888;
                }
                .iconfont{
                    font-size: 40rpx;
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    right: 10%;
                    color: #000;
                }
            }
        }
    }
}
// 最热评论
.comment {
  
  .hot_title {
    padding: 15rpx;

    .iconfont {
      font-size: 40rpx;
      color: red;
    }
    .comment_text {
      font-size: 28rpx;
      font-weight: bolder;
      color: #666;
      margin-left: 10rpx;
    }
  }
}

.comment_list {
  padding: 10rpx;

  .comment_item {
    border-bottom: 10rpx solid #eee;
    .comment_user {
      display: flex;
      padding: 20rpx 0;
      .user_icon {
        width: 15%;
        display: flex;
        justify-content: center;
        align-items: center;

        image {
          width: 70%;
        }
      }

      .user_name {
        flex: 1;
        .user_nickname {
          color: #777;
        }

      }

      .user_badge {
        image {
          width: 40rpx;
          height: 40rpx;
          display: inline-block;
        }
      }
    }

    .comment_desc {
      display: flex;
      padding: 30rpx 0;
      .comment_content {
        flex: 1;
        margin-left: 15%;
        color: #000;
      }

    }
  }
}

.iconpinglun {
  color: aqua!important;
}

.down_warp {
  display: flex;
  height: 100rpx;
  align-items: center;
  justify-content: center;
  .btn {
    width: 90%;
    height: 85%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: $color;
    color: #fff;
    font-size: 40rpx;
    font-weight: bolder;
  }
}
</style>